<template>
    <div>
        <div><h1>欢迎登录</h1></div>
        <div>
          <div>
            用户名：<input type="text" v-model="formData.username" name="username" id="username" />
          </div>
          <div>
            密码：<input type="password" v-model="formData.userpass" name="userpass" id="userpass"/>
          </div>
          <div>
            <button @click="login">登录</button>
          </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'LoginView',
    data(){
        return{
            formData:{
                username:"",
                userpass:"",
            }
        }
    },
    methods:{
        //登录方法
        async login(){
            //新建响应对象变量，接收异步请求后，服务器返回的数据信息
            let res = await this.$http.post('validateLogin',this.formData);
            console.log(res);
            if(res.state==200){
                alert("登录成功");
                //将登录成功后，后端返回用户信息存入Vuex中，记录登录状态
                this.$store.commit("login",JSON.stringify(res.data));
                this.$router.push("/");
            }else{
                alert("登录失败");
            }
        }
    }
}
</script>